<template>
  <div class="introduce container">
    <div class="title">
      <i class="iconfont icon-tubiao_-2"></i>
      <span>医院服务</span>
    </div>
    <div class="more">
     <div class="zi" v-for="(item, index) in icons" :key="index">
        <i :class="item.iconClass" :style="{ color: item.iconColor }"></i>
        <span>{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
const icons = [
{ iconClass: "iconfont icon-yiliaojigou", label: "医院介绍", iconColor: "#ffcc00" },
  { iconClass: "iconfont icon-tubiao_-2", label: "医院导航", iconColor: "#66ccff" },
  { iconClass: "iconfont icon-sharpicons_diagnose-heart", label: "就医指南", iconColor: "#ff9966" },
  { iconClass: "iconfont icon-sharpicons_pill", label: "健康百科", iconColor: "#cc99ff" },
];
</script>

<style lang="scss" scoped>
.introduce {
  display: flex;
  flex-direction: column;
  .title {
    display: flex;
    justify-self: start;
    align-items: center;
    height: 37px;

    i {
      margin-right: 10px;
      color: #006eff;
    }
  }
  .more {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .zi {
      border-radius: 5px;
      flex-shrink: 0;
      width: 23%;
      height: 80%;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 5px rgba(0.1, 0.1, 0.1, 0.1);
      i {
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 160%;
      }
      span {
        color: rgba(106, 135, 169, 0.996078431372549);
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>